<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WPF/E QuickStart: drawing and painting</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type='text/javascript' src='samples/aghost.js'></script>
</head>
<body style="margin: 0">
    <table class="outer" cellpadding="0" cellspacing="0">
        <tr>
            <td width="230px" class="navigation-cell" valign="top">
              <div class="navigation-content">
                
  <div id="tocControlHost"></div>

    <script type="text/javascript" src="assets/toc.js"></script>

    <script type="text/javascript">
        // Create the WPF/E ActiveX control.
        // The technique used here enables your WPF/E content to receive
		// input before its ActiveX control is clicked.
        new agHost(
            "tocControlHost", // hostElementID (HTML element to put WPF/E
                             // ActiveX control inside of -- usually a <div>)
	        "tocControl1", // ID of the WPF/E ActiveX control we create
	        "230x", // width
	        "410px", // height
            "#00000000", //backgroundcolor
	        null, // SourceElement (name of script tag containing xaml)
	        "assets/toc.xaml", //source file
	        "true", // IsWindowless
	        "30",  // MaxFrameRate

	        null // OnError handler (method name -- no quotes)
	    );
    </script>



    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 6; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>

              </div>
            </td>
            <td width="5px">
            </td>
            <td valign="top">
                <div style="margin: 5px">
                
<div class="header-section">
<table>
  <tr>
  <td><img src="images/drawingnotebook.png" /></td><td><h1>drawing and painting</h1></td>
  </tr>
</table>
</div>
 
<div class="intro-section">
<p>WPF/E supports vector graphics by providing the <span class="api-name">Ellipse</span>,
<span class="api-name">Rectangle</span>, <span class="api-name">Line</span>, <span class="api-name">Polyline</span>,
<span class="api-name">Polygon</span>, and <span class="api-name">Path</span>
elements. Collectively, these elements are known as the shape elements.</p>
<p>This document contains the following sections</p>


<ul>
<li><a href="#basicshapes">basic shapes</a></li>
<li><a href="#othershapeelements">other shape elements</a></li>
<li><a href="#paintingshapeswithbrushes">painting shapes with brushes</a></li>
<li><a href="#whatsnext">what's next?</a></li>
</ul>

</div>

<div class="section">
<a name="basicshapes"></a>
<h3>basic shapes</h3>
<p>WPF/E provides three basic shape elements: <span class="api-name">Ellipse</span>, <span class="api-name">Rectangle</span>, and <span class="api-name">Line</span>.</p>

<ul>
<li>An <span class="api-name">Ellipse</span> element describes an oval or circle. You control its horizontal diameter
by setting its <span class="api-name">Width</span> property, and its vertical diameter by setting its <span class="api-name">Height</span>
property.</li>
<li>A <span class="api-name">Rectangle</span> element describes a square or rectangle shape, optionally with
rounded corners. You control its horizontal size by setting its <span class="api-name">Width</span> property
and its vertical size by setting its <span class="api-name">Height</span> property. You can also use the
<span class="api-name">RadiusX</span> and <span class="api-name">RadiusY</span> properties to control the curvature of its corners.</li>
<li>Instead of using <span class="api-name">Width</span> and <span class="api-name">Height</span>,
you control the size and location of a <span class="api-name">Line</span> by setting its <span class="api-name">X1</span>,<span class="api-name">Y1</span>, <span class="api-name">X2</span>,
and <span class="api-name">Y2</span> properties.</li>
</ul>
<p>The following example draws an <span class="api-name">Ellipse</span>, a <span class="api-name">Rectangle</span>, and a
<span class="api-name">Line </span>in a <span class="api-name">Canvas</span>.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-ellipseRectangleLine.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Ellipse</span></strong> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Rectangle</span></strong> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Line</span></strong> <span class='code-red'>X1</span><span class='code-blue'>=</span><span class='code-blue'>"280"</span> <span class='code-red'>Y1</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>X2</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Y2</span><span class='code-blue'>=</span><span class='code-blue'>"280"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(true);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-ellipseRectangleLine.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-ellipseRectangleLine.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

</div>



<div class="section">
<a name="othershapeelements"></a>
<h3>other shape elements</h3>
<p>In addition to the <span class="api-name">Ellipse</span>, <span class="api-name">Line</span>, and <span class="api-name">Rectangle </span>elements, WPF/E provides
three other shape elements: <span class="api-name">Polygon</span>,
<span class="api-name">Polyline</span>, and <span class="api-name">Path</span>. A
<span class="api-name">Polygon </span>is a closed shape with an arbitrary number of sides, while a
<span class="api-name">Polyline </span>is a series of connected lines that might or might not form a closed
shape. The following example creates a <span class="api-name">Polygon </span>and a
<span class="api-name">Polyline</span>.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-polyline-polygon.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Polyline</span> <span class='code-red'>Points</span><span class='code-blue'>=</span><span class='code-blue'>"150, 150 150, 250 250, 250 250, 150"</span></strong>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Polygon</span> <span class='code-red'>Points</span><span class='code-blue'>=</span><span class='code-blue'>"10,10 10,110 110,110 110,10"</span></strong>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"LightBlue"</span><span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(true);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-polyline-polygon.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-polyline-polygon.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>


<p>The <span class="api-name">Path </span>element can be used to represent complex shapes that include curves
and arcs. To use a <span class="api-name">Path</span> element, you use a special type of attribute syntax to set its
<b>Data</b>
property. The following example creates three <b>Path</b> elements.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml2_hyperlink' onclick="toggleCode('xaml2','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-path.xaml-->
<pre id='xaml2' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Path</span> <span class='code-red'>Data</span><span class='code-blue'>=</span><span class='code-blue'>"M0,0 L11.5,0 11.5,30 5.75,40 0,30z"</span></strong>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span>
      <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-blue'>/&gt;</span>

  <span class='code-blue'>&lt;</span><span class='code-brown'>Path</span> <span class='code-red'>Data</span><span class='code-blue'>=</span><span class='code-blue'>"M 10,100 C 10,300 300,-200 250,100z"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span>
      <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-blue'>/&gt;</span>
      
  <span class='code-blue'>&lt;</span><span class='code-brown'>Path</span> <span class='code-red'>Data</span><span class='code-blue'>=</span><span class='code-blue'>"M 0,200 L100,200 50,50z"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Gray"</span>
      <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"150"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-blue'>/&gt;</span>

  
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag2_hyperlink' onclick="toggle_ag2()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag2_restart' onclick="restart_ag2();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag2Host">
    </div>

    <script type="text/javascript">
    var ag2visible = !(true);

    function toggle_ag2() {
        var text = "preview";
        if (ag2visible) {
            ag2visible = false;

            var element = document.getElementById("ag2Host");
            element.style.display = "none";
			element = document.getElementById("ag2_restart");
            element.style.display = "none";


            document.getElementById("ag2_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag2Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag2", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-path.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag2Host");
            element.style.display = "";
            ag2visible = true;
			element = document.getElementById("ag2_restart");
            element.style.display = "";
            document.getElementById("ag2_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag2() {

	            new agHost(
	                "ag2Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag2", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-path.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag2visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag2();
    </script>

<p>For more information about path markup syntax, see <i>Path Markup Syntax</i>
in the WPF/E SDK.</p>
</div>




<div class="section">
<a name="paintingshapeswithbrushes"></a>
<h3>painting shapes with brushes</h3>
<p>Most shapes consist of two parts, a stroke (the outline) and a fill which are
controllable through their <span class="api-name">Stroke </span>and
<span class="api-name">Fill </span>properties. The
following illustration labels the stroke and fill of the <span class="api-name">
Rectangle</span> from the
first example.</p>
<p><img src="images/strokeandfill.png" /></p>
<p>Not every shape has both a fill and a stroke: A <span class="api-name">Line</span> has only a stroke.
Setting the <span class="api-name">Fill</span> property of a
<span class="api-name">Line</span> has no effect.</p>


<p>You set a shape&#39;s <span class="api-name">Stroke</span> and
<span class="api-name">Fill</span> with a Brush. There are 4 types of
brush objects that
you can use:</p>
<ul>
 <li><span class="api-name">SolidColorBrush</span></li>
<li><span class="api-name">LinearGradientBrush</span></li>
<li><span class="api-name">
RadialGradientBrush</span></li>
<li><span class="api-name">ImageBrush</span></li></ul>


<div class="section">
<h4>painting with solid colors with a SolidColorBrush</h4>
<p>To paint an area a solid color, you use a <span class="api-name">
SolidColorBrush</span>. XAML provides several ways to
create a <span class="api-name">SolidColorBrush</span>.&nbsp; </p>

<ul>
<li>You can use attribute syntax to specify the name of a color, such as <code>&quot;Black&quot;</code> or <code>&quot;Gray&quot;</code>.</li>

<li>You can
use attribute syntax with hexadecimal&nbsp;notation to describe the red, green, and blue values of a
color, and optionally its transparency. There are several formats you can use.
<ul>
<li>6-digit notation. The format is <code>#<i>rrggbb</i></code>, where <i>rr</i> is a two-digit
hexadecimal value that describes the amount of red in the color, <i>gg</i> describes the amount of green,
and <i>bb</i> describes the amount of blue. For example, <code>#0033FF</code>.</li>
<li>8-digit notation. The format is the same as 6-digit notation, except with
two extra values for describing the alpha value, or opacity, of the color:
<code>#aarrggbb</code>. For example, <code>#990033FF</code>.</li>

</ul></li>
<li>You can use object element syntax to explicitly create a
<span class="api-name">SolidColorBrush</span> and
set its <span class="api-name">Color</span> property.</li>
</ul>

<p>The following example shows several ways to paint an object black. </p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml3_hyperlink' onclick="toggleCode('xaml3','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-colors.xaml-->
<pre id='xaml3' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span>
      <strong><span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span></strong><span class='code-blue'>/&gt;</span> <span class='code-blue'>&lt;!--</span><span class='code-green'> SolidColorBrush by color name. </span><span class='code-blue'>--&gt;</span>
      
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span>
      <strong><span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"#000000"</span></strong><span class='code-blue'>/&gt;</span> <span class='code-blue'>&lt;!--</span><span class='code-green'> SolidColorBrush by 6-digit hexadecimal notation. </span><span class='code-blue'>--&gt;</span>
      
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span>
      <strong><span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"#ff000000"</span></strong><span class='code-blue'>/&gt;</span> <span class='code-blue'>&lt;!--</span><span class='code-green'> SolidColorBrush by 8-digit hexadecimal notation. </span><span class='code-blue'>--&gt;</span>
      
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span><span class='code-blue'>&gt;</span>
<strong>    <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse.Fill</span><span class='code-blue'>&gt;</span>
    
      <span class='code-blue'>&lt;!--</span><span class='code-green'> SolidColorBrush by object element syntax. </span><span class='code-blue'>--&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>SolidColorBrush</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Ellipse.Fill</span><span class='code-blue'>&gt;</span>
</strong>  <span class='code-blue'>&lt;/</span><span class='code-brown'>Ellipse</span><span class='code-blue'>&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag3_hyperlink' onclick="toggle_ag3()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag3_restart' onclick="restart_ag3();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag3Host">
    </div>

    <script type="text/javascript">
    var ag3visible = !(true);

    function toggle_ag3() {
        var text = "preview";
        if (ag3visible) {
            ag3visible = false;

            var element = document.getElementById("ag3Host");
            element.style.display = "none";
			element = document.getElementById("ag3_restart");
            element.style.display = "none";


            document.getElementById("ag3_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag3Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag3", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-colors.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag3Host");
            element.style.display = "";
            ag3visible = true;
			element = document.getElementById("ag3_restart");
            element.style.display = "";
            document.getElementById("ag3_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag3() {

	            new agHost(
	                "ag3Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag3", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-colors.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag3visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag3();
    </script>

</div>

<div class="section">
<h4>painting with gradients with LinearGradientBrush and RadialGradientBrush</h4>
<p>WPF/E supports both linear and radial gradients.&nbsp; Gradients have
one or more gradients stops that describe the different colors that the gradient
transitions between and the
location of those colors. Most gradients only need two gradients stops, but you can add as many gradients stops as you need.&nbsp;</p>
<ul>
<li>
<span class="api-name">LinearGradientBrush</span> paints a gradient along a line. This line is diagonal by default
and stretches from the upper-left corner to the lower-right corner of the
painted object.
You can use the <span class="api-name">StartPoint</span> and
<span class="api-name">EndPoint</span> properties to change the position of the line.</li>
<li>
<span class="api-name">
RadialGradientBrush</span> paints a gradient along a circle. By default, the circle is centered on the area being painted.
You can customize the gradient by setting its <span class="api-name">
GradientOrigin</span>, <span class="api-name">Center</span>,
<span class="api-name">RadiusX</span>, and <span class="api-name">RadiusY</span> properties.
</li>

</ul>

<p>To add gradient stops to a gradient brush, you create <span class="api-name">
GradientStop</span> objects.
Set the <span class="api-name">Offset</span> property of a
<span class="api-name">GradientStop</span> to a value between 0 and 1 to set its
relative position in the gradient. Set the <span class="api-name">Color</span> property of the
<span class="api-name">GradientStop</span> to
a named color or a hexadecimal value.</p>
<p>The following example uses
<span class="api-name">LinearGradientBrush</span> and <span class="api-name">
RadialGradientBrush</span>
objects to paint four Rectangle objects. </p>



<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml4_hyperlink' onclick="toggleCode('xaml4','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-gradients.xaml-->
<pre id='xaml4' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;!--</span><span class='code-green'> Linear gradients </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"140"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span><span class='code-blue'>&gt;</span>
<strong>    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>LinearGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.25"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.75"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>LinearGradientBrush</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
</strong>  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"140"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"155"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>LinearGradientBrush</span>  <strong><span class='code-red'>StartPoint</span><span class='code-blue'>=</span><span class='code-blue'>"0,0"</span> <span class='code-red'>EndPoint</span><span class='code-blue'>=</span><span class='code-blue'>"1,0"</span></strong><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.25"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.75"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>LinearGradientBrush</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;!--</span><span class='code-green'> Radial gradients </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"140"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span><span class='code-blue'>&gt;</span>
<strong>    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.25"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.75"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
</strong>  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"140"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"155"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <strong><span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"1,0"</span></strong><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.25"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.75"</span> <span class='code-blue'>/&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag4_hyperlink' onclick="toggle_ag4()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag4_restart' onclick="restart_ag4();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag4Host">
    </div>

    <script type="text/javascript">
    var ag4visible = !(true);

    function toggle_ag4() {
        var text = "preview";
        if (ag4visible) {
            ag4visible = false;

            var element = document.getElementById("ag4Host");
            element.style.display = "none";
			element = document.getElementById("ag4_restart");
            element.style.display = "none";


            document.getElementById("ag4_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag4Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag4", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-gradients.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag4Host");
            element.style.display = "";
            ag4visible = true;
			element = document.getElementById("ag4_restart");
            element.style.display = "";
            document.getElementById("ag4_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag4() {

	            new agHost(
	                "ag4Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag4", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-gradients.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag4visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag4();
    </script>

<p>You can also use gradients to paint a shape's <span class="api-name">Stroke</span>.</p>
<p>The following illustration highlights the gradient stops of the first
<span class="api-name">LinearGradientBrush</span> from the previous example.</p>
<p><img src="images/gradientstops.jpg" /></p>

</div>

<div class="section">
<h4>painting with images using ImageBrush</h4>
<p>Another type brush is <span class="api-name">ImageBrush</span>.&nbsp; By default, the image is stretched to
fill the entire shape, but you can use the <span class="api-name">Stretch</span> property to control how the
brush stretches its image. The following example uses two <span class="api-name">
ImageBrush</span> objects
with different <span class="api-name">Stretch</span> settings to paint two
<span class="api-name">Rectangle</span> objects.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml5_hyperlink' onclick="toggleCode('xaml5','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for drawing-ImageBrush.xaml-->
<pre id='xaml5' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span>
   <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"White"</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"180"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
<strong>      <span class='code-blue'>&lt;</span><span class='code-brown'>ImageBrush</span> <span class='code-red'>ImageSource</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span><span class='code-blue'>/&gt;</span>
</strong>    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"180"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span>
      <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>ImageBrush</span> <span class='code-red'>ImageSource</span><span class='code-blue'>=</span><span class='code-blue'>"star.png"</span> <strong><span class='code-red'>Stretch</span><span class='code-blue'>=</span><span class='code-blue'>"Uniform"</span></strong><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag5_hyperlink' onclick="toggle_ag5()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag5_restart' onclick="restart_ag5();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag5Host">
    </div>

    <script type="text/javascript">
    var ag5visible = !(true);

    function toggle_ag5() {
        var text = "preview";
        if (ag5visible) {
            ag5visible = false;

            var element = document.getElementById("ag5Host");
            element.style.display = "none";
			element = document.getElementById("ag5_restart");
            element.style.display = "none";


            document.getElementById("ag5_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag5Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag5", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/drawing-ImageBrush.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag5Host");
            element.style.display = "";
            ag5visible = true;
			element = document.getElementById("ag5_restart");
            element.style.display = "";
            document.getElementById("ag5_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag5() {

	            new agHost(
	                "ag5Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag5", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/drawing-ImageBrush.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag5visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag5();
    </script>

</div>
</div>


<div class="section">
<a name="whatsnext"></a>
<h3>what's next</h3>
<p>Like all UI elements, shape elements can be scaled, rotated, or translated by
using their <span class="api-name">RenderTransform</span> property. For more information, see the next topic, <a href="visual-frames.html">common graphics
properties</a>.</p>
</div>

<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 6; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>

                </div>
            </td>
        </tr>
    </table>
</body>
</html>
